// ui/components/LogEntryDetail.js
// Assuming ElementPlus components (ElScrollbar, ElButton, ElTag, ElEmpty) and icons are globally available.

export default {
  name: 'LogEntryDetail',
  props: {
    detail: {
      type: Object, // Was PropType<LLMLogEntryModel | null>
      required: false,
      default: null
      // JSDoc for reference:
      /**
       * @type {null | {
       *   log_entry_id: string;
       *   agent_id: string;
       *   timestamp_call_start: string;
       *   timestamp_call_end?: string;
       *   llm_call_type: 'active_listening' | 'public_speech' | 'other';
       *   raw_llm_input_context_summary?: string;
       *   raw_llm_output: string;
       *   parsed_thinking_process?: string;
       *   parsed_desire_level?: string;
       *   parsed_internal_thought_summary?: string;
       *   parsed_potential_topics?: string[];
       *   parsed_spoken_tags?: string[];
       *   parsed_spoken_message?: string;
       *   associated_public_message_id?: string;
       *   error_info?: string;
       * }}
       */
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['copy-raw-output-clicked', 'go-back'],
  setup(props, { emit }) {
    const { computed } = Vue; // Vue is global

    function handleGoBack() {
      emit('go-back');
    }

    function handleCopyRawOutput() {
      if (props.detail && props.detail.raw_llm_output) {
        // Assuming ElMessage is globally available from ElementPlus
        const ElMessage = window.ElementPlus?.ElMessage;
        if (navigator.clipboard) {
            navigator.clipboard.writeText(props.detail.raw_llm_output).then(() => {
                if (ElMessage) ElMessage.success('原始LLM输出已复制');
                else console.log('原始LLM输出已复制 (ElMessage not found)');
            }).catch(err => {
                console.error('Failed to copy raw LLM output:', err);
                if (ElMessage) ElMessage.error('复制失败');
                else console.error('复制失败 (ElMessage not found)');
            });
        } else {
            if (ElMessage) ElMessage.warning('剪贴板功能不可用');
            else console.warn('剪贴板功能不可用 (ElMessage not found)');
        }
      }
    }

    function formatTimestamp(timestamp) { // Removed type annotation: string, string
      if (!timestamp) return 'N/A';
      try {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (e) {
        console.error("Failed to format timestamp:", timestamp, e);
        return String(timestamp); // Fallback to raw string
      }
    }

    const callTypeDisplay = computed(() => {
      if (!props.detail) return '';
      switch (props.detail.llm_call_type) {
        case 'active_listening': return '主动聆听 (Active Listening)';
        case 'public_speech': return '公开发言 (Public Speech)';
        default: return String(props.detail.llm_call_type);
      }
    });

    return {
      // props are automatically available in the template
      handleGoBack,
      handleCopyRawOutput,
      formatTimestamp,
      callTypeDisplay,
    };
  },
  template: `
  <el-scrollbar class="log-entry-detail-scrollbar" height="100%">
    <div class="log-entry-detail-container">
      <el-button @click="handleGoBack" class="back-button" icon="ArrowLeft">返回列表</el-button>
      
      <div v-if="isLoading && !detail" class="loading-message">
        正在加载详情...
      </div>
      <div v-else-if="detail" class="detail-content">
        <h4>日志详情 (ID: <span class="code-font">{{ detail.log_entry_id }}</span>)</h4>
        
        <div class="detail-section">
          <strong class="detail-label">Agent ID:</strong>
          <span class="detail-value code-font">{{ detail.agent_id }}</span>
        </div>

        <div class="detail-section">
          <strong class="detail-label">调用类型:</strong>
          <span class="detail-value">{{ callTypeDisplay }}</span>
        </div>

        <div class="detail-section">
          <strong class="detail-label">开始时间:</strong>
          <span class="detail-value">{{ formatTimestamp(detail.timestamp_call_start) }}</span>
        </div>
        
        <div v-if="detail.timestamp_call_end" class="detail-section">
          <strong class="detail-label">结束时间:</strong>
          <span class="detail-value">{{ formatTimestamp(detail.timestamp_call_end) }}</span>
        </div>

        <div v-if="detail.raw_llm_input_context_summary" class="detail-section">
          <strong class="detail-label">输入上下文摘要:</strong>
          <el-scrollbar max-height="150px" class="pre-scrollbar">
            <pre class="detail-value code-font scrollable-pre">{{ detail.raw_llm_input_context_summary }}</pre>
          </el-scrollbar>
        </div>
        
        <div v-if="detail.raw_llm_output" class="detail-section">
          <strong class="detail-label">原始LLM输出:</strong>
          <el-button @click="handleCopyRawOutput" class="copy-button" icon="CopyDocument" size="small" type="primary" title="复制原始输出">复制</el-button>
          <el-scrollbar max-height="200px" class="pre-scrollbar">
            <pre class="detail-value code-font scrollable-pre">{{ detail.raw_llm_output }}</pre>
          </el-scrollbar>
        </div>

        <div v-if="detail.parsed_thinking_process" class="detail-section">
          <strong class="detail-label">解析的通用思考过程:</strong>
          <el-scrollbar max-height="150px" class="pre-scrollbar">
            <pre class="detail-value code-font scrollable-pre">{{ detail.parsed_thinking_process }}</pre>
          </el-scrollbar>
        </div>

        <template v-if="detail.llm_call_type === 'active_listening'">
          <div v-if="detail.parsed_desire_level" class="detail-section">
            <strong class="detail-label">解析的发言意愿等级:</strong>
            <span class="detail-value code-font">{{ detail.parsed_desire_level }}</span>
          </div>
          <div v-if="detail.parsed_internal_thought_summary" class="detail-section">
            <strong class="detail-label">解析的内部思考摘要 (聆听):</strong>
            <el-scrollbar max-height="150px" class="pre-scrollbar">
              <pre class="detail-value code-font scrollable-pre">{{ detail.parsed_internal_thought_summary }}</pre>
            </el-scrollbar>
          </div>
          <div v-if="detail.parsed_potential_topics && detail.parsed_potential_topics.length > 0" class="detail-section">
            <strong class="detail-label">解析的潜在讨论主题 (聆听):</strong>
            <span class="detail-value code-font">{{ detail.parsed_potential_topics.join(', ') }}</span>
          </div>
        </template>

        <template v-if="detail.llm_call_type === 'public_speech'">
          <div v-if="detail.parsed_spoken_tags && detail.parsed_spoken_tags.length > 0" class="detail-section">
            <strong class="detail-label">解析的发言标签:</strong>
            <div class="tags-container">
              <el-tag v-for="tag in detail.parsed_spoken_tags" :key="tag" type="info" size="small" class="detail-tag">{{ tag }}</el-tag>
            </div>
          </div>
          <div v-if="detail.parsed_spoken_message" class="detail-section">
            <strong class="detail-label">解析的发言内容:</strong>
            <el-scrollbar max-height="150px" class="pre-scrollbar">
             <pre class="detail-value code-font scrollable-pre">{{ detail.parsed_spoken_message }}</pre>
            </el-scrollbar>
          </div>
        </template>
        
        <div v-if="detail.associated_public_message_id" class="detail-section">
          <strong class="detail-label">关联的公开消息ID:</strong>
          <span class="detail-value code-font">{{ detail.associated_public_message_id }}</span>
        </div>

        <div v-if="detail.error_info" class="detail-section error-section">
          <strong class="detail-label">错误信息:</strong>
          <el-scrollbar max-height="100px" class="pre-scrollbar">
            <pre class="detail-value code-font scrollable-pre error-text">{{ detail.error_info }}</pre>
          </el-scrollbar>
        </div>

      </div>
      <el-empty v-else-if="!isLoading" description="没有日志详情可显示。" class="no-detail-message" />
    </div>
  </el-scrollbar>
  `
};